import React, {Component} from 'react';
import {Layout,} from 'antd';
import './style/index.less';
import SiderCustom from './components/SiderCustom';
import HeaderCustom from './components/HeaderCustom';
import {receiveData} from './action';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import Routes from './routes';

const {Header, Content, Sider} = Layout;

class App extends Component {
    state = {
        collapsed: false,
    };

    componentWillMount() {
        const {receiveData} = this.props;
        const user = JSON.parse(localStorage.getItem('user'));
        user && receiveData(user, 'auth');
        /*this.getClientWidth();
        window.onresize = () => {
            this.getClientWidth();
        }*/
    }


    getClientWidth = () => {    // 获取当前浏览器宽度并设置responsive管理响应式
        const {receiveData} = this.props;
        const clientWidth = document.body.clientWidth;
        receiveData({isMobile: clientWidth <= 992}, 'responsive');
    };
    toggle = () => {
        this.setState({
            collapsed: !this.state.collapsed,
        });
    };

    render() {
        const {auth} = this.props;

        return (
            <Layout>
                <Header style={{padding: 0, background: '#F54B4E', height: 54, maxHeight: 54, minHeight: 54}}>
                    <HeaderCustom collapsed={this.state.collapsed} user={auth.data || {}}/>
                </Header>
                <Layout style={{backgroundColor: 'white',position:'relative'}}>
                    <Sider>
                        {/* {!responsive.data.isMobile && <SiderCustom collapsed={this.state.collapsed} />}*/}
                        <SiderCustom collapsed={this.state.collapsed} permission={auth.data && auth.data.permission}/>
                    </Sider>
                    <Content style={{margin: '0 0 0 16px'}}>
                        <Routes auth={auth}/>
                    </Content>
                    <style>{`
                    .ant-layout.ant-layout-has-sider > .ant-layout, .ant-layout.ant-layout-has-sider > .ant-layout-content{
                    overflow-x:auto !important;}
                    `}</style>
                </Layout>
            </Layout>
        );
    }
}

const mapStateToProps = state => {
    const {auth = {data: {}}, responsive = {data: {}}} = state.httpData;
    return {auth, responsive};
};
const mapDispatchToProps = dispatch => ({
    receiveData: bindActionCreators(receiveData, dispatch)
});

export default connect(mapStateToProps, mapDispatchToProps)(App);
